import 'aoda.css'
import { getDeviceSize, World } from '@ecs/index'
import loader from './loader'
import { createScene } from './entities'
import {
  CollisionSystem,
  EventSystem,
  ObstacleSystem,
  RenderSystem,
  RotateSystem,
  ScoreSystem,
  VelocitySystem
} from './systems'

const { width, height } = getDeviceSize()
const canvas = document.createElement('canvas')
canvas.width = width
canvas.height = height
canvas.innerText = '您的浏览器不支持canvas！'
canvas.style.cursor = 'pointer'
document.querySelector('#app').appendChild(canvas)
const ctx = canvas.getContext('2d')

loader.onLoaded(map => {
  const world = new World({
    canvas, // 绘图元素
    map, // 资源仓库
    isGameOver: false, // 是否游戏结束
    speed: 2, // 游戏速度
    gap: canvas.height / 4 // 障碍物间隔
  })
  world.addSystem(new EventSystem(canvas, world))
  world.addSystem(new ObstacleSystem(canvas))
  world.addSystem(new VelocitySystem(canvas))
  world.addSystem(new RotateSystem())
  world.addSystem(new CollisionSystem())
  world.addSystem(new ScoreSystem())
  world.addSystem(new RenderSystem(ctx))

  createScene(world)

  world.start()
})
